<template>
  <div class="home">
    <Header head-title="绑定手机号"></Header>
    <h1 class="Back">欢迎回来</h1>
    <p class="BackP">欢迎登陆平顶山市网上就医平台</p>
    <section class="BackCon">
      <input
        class="Back_input"
        type="tel"
        maxlength="11"
        v-model="phone"
        name
        id
        placeholder="请输入手机号"
      />
      <input
        class="Back_input"
        type="tel"
        maxlength="6"
        v-model="code"
        name
        id
        placeholder="请输入验证码"
      />
      <button class="GetCode" :disabled="dis" @click="getCode">{{text}}</button>
    </section>
    <p class="BackP">未注册的手机号验证后自动创建就诊账户</p>
    <el-button type="primary" class="Login" @click="login">登录</el-button>
  </div>
</template>

<script>
import Header from '../../components/Header'
import { Toast } from 'mint-ui'

export default {

  data () {
    return {
      phone: '',
      code: '',
      time: 60,
      text: '获取验证码',
      dis: false
    }
  },
  components: {
    Header
  },
  methods: {
    getCode () {
      // 校验手机号
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        Toast('请输入正确的手机号')
        return
      }
      // 验证码时间控制60秒后重发
      let time = this.time
      const sel = setInterval(() => {
        time--
        // console.log(time)
        const text = time + '秒重新发送'
        this.time = time
        this.text = text
        this.dis = true
        if (time === 0) {
          clearInterval(sel)
          this.time = 60
          this.text = '获取验证码'
          this.dis = false
        }
      }, 1000)
      const url = 'sso/authCode?mobile=' + this.phone
      this.$axios({
        method: 'post',
        url: url
      })
    },
    login () {
      if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
        Toast('请输入正确的手机号')
        return
      }
      if (this.code.length !== 6) {
        Toast('请输入验证码')
        return
      }
      const url = 'sso/valid/authCode?mobile=' + this.phone + '&code=' + this.code
      this.$axios({
        method: 'post',
        url: url
      }).then(res => {
        // console.log(res)
        if (res.data.code !== 200) { // 验证验证码失败
          Toast(res.message)
          return
        }
        Toast('登录成功')
        this.$router.push({
          path: '/Bind'
        })
      }
      )
    }
  }
}
</script>

<style scoped>
.home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.8rem;
  background: #fff;
  padding-top: 1.5rem;
  overflow-y: auto;
}

</style>
